<!-- 音乐界面 -->
<template>
   <div class="mid-mid">
      <img :class="['dish',{circly:dishstatus}] " src="@/assets/disc.png" alt="">
      <img class="dishpic" :src="picUrl" alt="">
      <img :class="['dishcontorl',{reset:disconstatus}]" src="@/assets/player_bar.png" alt="">
    </div>
</template>

<script>
export default {
    props:{
        picUrl:{
            type:String,
            default:""
        },
        disconstatus:{
          type:Boolean,
          default:false
        },
        dishstatus:{
          type:Boolean,
          default:false
        }
    },
  data () {
    return {
        
    }
  },

  methods: {}
}

</script>
<style  scoped>
.mid-mid{
  position: relative;
}
.mid-mid .dish{
  position: absolute;
  top: 110px;
  left: 70px;
  /* transform: translate(-50%,-50%); */
  z-index: 5;
}
.circly{
  -webkit-animation:rotate 10s linear infinite;
}
 
.mid-mid .dishcontorl{
   position: absolute;
   top: 0;
   left: 50%;
   transform-origin: 0 0;
   transform: translateX(-50%) rotate(-30deg);
   -webkit-animation:all 3s;
   z-index: 10;
}
.reset{
   transform: translateX(-50%) rotate(0deg) !important;
}
.mid-mid .dishpic{
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  z-index: 2;
}
@-webkit-keyframes rotate{
  0% {
	transform:rotate(0deg);

}
100% {
	transform:rotate(360deg);
	
}
}
</style>